const can = document.getElementById('canvas');
const cxt = can.getContext('2d');

let num = 200,data,liuXY,k,range,length,w,h;
init();
window.onresize = init;
function init(){
	w = can.width = window.innerWidth;
	h = can.height = window.innerHeight;
	data = [];
	liuXY = [];
	k = -1;
	range = Math.atan(k);
	length = 200;
	for ( let i=0;i<num;i++ )
	{
		data[i] = {x:Math.random()*w , y:Math.random()*h , r:Math.random()*8+3};
		Cricle( data[i].x , data[i].y , data[i].r );
	};
};
!function draw(){
	cxt.clearRect(0,0,w,h);
	for (let i=0;i<num;i++ )
	{
		data[i].r += Math.random()*2-1;
		data[i].r = Math.max(0 , data[i].r);
		data[i].r = Math.min(12 , data[i].r);
		Cricle( data[i].x , data[i].y , data[i].r );
	};
	if ( liuXY.length )
	{
		for (let i in liuXY )
		{
			liuXY[i].cX -= 10;
			liuX(liuXY[i].cX , liuXY[i].y , liuXY[i].x);
			if ( liuXY[i].cX < 0 || getY(liuXY[i].cX,liuXY[i].y , liuXY[i].x) > h )
			{
				liuXY.splice(i,1);
			};
		};
	};
	if ( Math.random() > 0.98 )
	{
		if ( Math.random() >= 0.5 )
		{
			let a = Math.random()*w;
			liuXY.push({x:a , y:0, cX:a});
		}else
		{
			let a = Math.random()*h;
			liuXY.push({x:w , y:a, cX:w});
		}
	};
	window.requestAnimationFrame(draw);
}();
function liuX(x,sX,sY){
	cxt.save();
	let y = getY(x,sY,sX);
	let r = 15;
	let rad = cxt.createRadialGradient(x,y,0,x,y,r);
		rad.addColorStop(0,'rgba(255,255,255,0.8)');
		rad.addColorStop(0.1,'rgba(255,255,255,0.8)');
		rad.addColorStop(0.2,'rgba(255,255,255,0.08)');
		rad.addColorStop(1,'rgba(255,255,255,0)');
	cxt.fillStyle = rad;
	cxt.beginPath();
	cxt.arc(x,y,r,0,2*Math.PI,true);
	cxt.closePath();
	cxt.fill();
	cxt.restore();

	let wX = x + (Math.cos(range)*length);
	let wY = y + (Math.sin(range)*length);

	let x1 = x + 3;
	let y1 = y;
	let x2 = x;
	let y2 = y - 3;

	cxt.save();
	let rad2 = cxt.createRadialGradient(x,y,0,x,y,length);
		rad2.addColorStop(0,'rgba(255,255,255,0.1)');
		rad2.addColorStop(1,'rgba(255,255,255,0)');
	cxt.fillStyle = rad2;
	cxt.beginPath();
	cxt.moveTo(x1,y1);
	cxt.lineTo(x2,y2);
	cxt.lineTo(wX,wY);
	cxt.closePath();
	cxt.fill();
	cxt.restore();
};

function getY(x , startY , startX){
	return k*x + startY - k*startX;
};

function Cricle(x,y,r){
	cxt.save();
	let rad = cxt.createRadialGradient(x,y,0,x,y,r);
		rad.addColorStop(0,'rgba(255,255,255,0.8)');
		rad.addColorStop(0.1,'rgba(255,255,255,0.8)');
		rad.addColorStop(0.2,'rgba(255,255,255,0.08)');
		rad.addColorStop(1,'rgba(255,255,255,0)');
	cxt.fillStyle = rad;
	cxt.beginPath();
	cxt.arc(x,y,r,0,2*Math.PI,true);
	cxt.closePath();
	cxt.fill();
	cxt.restore();
};